<template>
  <div>
    <el-row :gutter="30">
      <!--用户数据-->
      <el-col :xs="15" :sm="18" :md="20" :lg="20" :xl="20" style="width: 1020px">
        <!--工具栏-->
        <div class="head-container">
          <div v-if="crud.props.searchToggle">
            <!-- 搜索 -->
            <el-input
              v-model="query.blurry"
              clearable
              size="small"
              placeholder="输入户主姓名进行搜索"
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
            <el-date-picker
              v-model="query.starttime"
              :default-time="['00:00:00','23:59:59']"
              type="daterange"
              range-separator=":"
              size="small"
              class="date-item"
              value-format="yyyy-MM-dd HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            <rrOperation :crud="crud" />
          </div>
          <crudOperation show="" :permission="permission" />
        </div>
        <!--表单渲染-->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="800px">
          <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="160px">
                <div id="body" style="clear:left">
                  <dl class="content">
                    <dt>户内编号：</dt>
                    <dd>
                      <input v-model="form.code" />
                    </dd>
                    <hr class="one_line">
                    <dt>户主姓名：</dt>
                    <dd>
                      <input v-model="form.name" />
                    </dd>
                    <hr class="one_line">
                    <dt>身份证号：</dt>
                    <dd>
                      <input v-model="form.card" />
                    </dd>
                    <hr class="one_line"/>
                    <dt>电话号码：</dt>
                    <dd>
                      <input v-model="form.telephone" />
                    </dd>
                    <hr class="one_line">
                    <dt>农合证号：</dt>
                    <dd>
                      <input v-model="form.farmid" />
                    </dd>
                    <hr class="one_line">
                    <dt>支付方式：</dt>
                    <dd>
                      <el-select v-model="form.paytype" placeholder="支付宝" style="width: 176px">
                        <el-option
                          v-for="item in payTypeOptions"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                        </el-option>
                      </el-select>
                    </dd>
                    <hr class="one_line">
                    <dt></dt>
                  </dl>
                </div>
              <dt></dt>
               <dd class="btn-dd">
                  <span class="new-btn-login-sp">
                     <el-button class="new-btn-login" :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
                  </span>
                <span class="note-help">如果您点击“确认”按钮，即表示您同意该次的执行操作。</span>
              </dd>
              <div>
                <ul class="foot-ul">
                  <li>
                    支付宝版权所有 2015-2018 ALIPAY.COM
                  </li>
                </ul>
              </div>
              </el-form>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" style="width: 100%"  @selection-change="crud.selectionChangeHandler">
          <el-table-column :selectable="checkboxT" type="selection" width="60" />
          <el-table-column v-if="columns.visible('code')" :show-overflow-tooltip="true" prop="code" label="户内编号" />
          <el-table-column v-if="columns.visible('name')" :show-overflow-tooltip="true" prop="name" label="户主姓名" />
          <el-table-column v-if="columns.visible('card')" :show-overflow-tooltip="true" prop="card" label="身份证号" width="160"/>
          <el-table-column v-if="columns.visible('sex')" :show-overflow-tooltip="true" prop="sex" label="性别" :formatter="formatSex"/>
          <el-table-column v-if="columns.visible('nationid')" :show-overflow-tooltip="true" prop="nation.name" label="民族" />
          <el-table-column v-if="columns.visible('heath')" :show-overflow-tooltip="true" prop="heath" label="健康状态" :formatter="formatHeath" />
          <el-table-column v-if="columns.visible('culture')" :show-overflow-tooltip="true" prop="culture" label="文化程度" />
          <el-table-column v-if="columns.visible('attr')" :show-overflow-tooltip="true" prop="attr" label="人员属性" />
          <el-table-column v-if="columns.visible('isfarm')" :show-overflow-tooltip="true" prop="isfarm" label="是否农业户口" width="120" :formatter="formatIsfarm" align="center"/>
          <el-table-column v-if="columns.visible('wedding')" :show-overflow-tooltip="true" prop="wedding" label="婚姻情况" :formatter="formatWedding"/>
          <el-table-column v-if="columns.visible('positionid')" :show-overflow-tooltip="true" prop="position.name" label="岗位" width="120" />
          <el-table-column v-if="columns.visible('telephone')" :show-overflow-tooltip="true" prop="telephone" label="电话号码" width="160" />
          <el-table-column v-if="columns.visible('farmid')" :show-overflow-tooltip="true" prop="farmid" label="农合证号" />
          <el-table-column v-if="columns.visible('iscountry')" :show-overflow-tooltip="true" prop="iscountry" label="是否农村户口" width="120" :formatter="formatIscountry"/>
          <el-table-column v-if="columns.visible('work')" :show-overflow-tooltip="true" prop="work" label="工作单位" />
          <el-table-column v-if="columns.visible('sortid')" :show-overflow-tooltip="true" prop="csort.name" label="慢性病" width="130"/>
          <el-table-column :formatter="dateFormat" v-if="columns.visible('starttime')" :show-overflow-tooltip="true" prop="starttime" label="慢性开始时间" width="120" align="center"/>
          <el-table-column :formatter="dateFormat" v-if="columns.visible('endtime')" :show-overflow-tooltip="true" prop="endtime" label="慢性结束时间" width="120" align="center"/>
          <el-table-column v-if="columns.visible('homeFile.realName')" :show-overflow-tooltip="true" prop="homeFile.realName" label="附件" width="200"/>
          <el-table-column
            v-permission="['admin','farmer:edit','farmer:del']"
            label="操作"
            width="125"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <payOperation
                :data="scope.row"
                :permission="permission"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import crudHome from '@/api/vocation/home'
  import { getNations } from "@/api/common/nation";
  import { getSorts} from "@/api/system/sort";
  import CRUD, { presenter, header, form, crud } from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import payOperation from '@crud/Pay.operation'
  import pagination from '@crud/Pagination'
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {getPositions} from "@/api/common/position";
  import moment from 'moment'

  // crud交由presenter持有
  const defaultCrud = CRUD({ title: '汇款确认', url: 'api/home', crudMethod: { ...crudHome }})
  // 注意是数组形式的关联属性 否则无法识别数组属性中id
  const defaultForm = {id: null, code: null, name: null, card: null, sex: null, nation: {id: null}, heath: null, culture: null, attr: null, isfarm: null, wedding: null, position: {id: null}, telephone: null, farmid: null, iscountry: null, work: null , paytype: null, csort: {id: null} , starttime: null, endtime:null, homeFile: []}
  export default {
    components: { Treeselect, crudOperation, rrOperation, udOperation, pagination, payOperation },
    mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
    data() {
      return {
        activeName: 'first',
        fileList: [],
        sorts: [],
        nations: [],
        positions: [],
        payTypeOptions: [{
          value: '1',
          label: '支付宝'
        },{
          value: '0',
          label: '微信'
        }],
        value: '',
        height: document.documentElement.clientHeight - 180 + 'px;',
        defaultProps: { children: 'children', label: 'group' },
        permission: {
          add: ['admin', 'vocation', 'home:add'],
          edit: ['admin', 'vocation', 'home:edit'],
          del: ['admin', 'vocation', 'home:del']
        },
        rules: {
          code: [
            { required: true, message: '户内编号', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '户主姓名', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          card: [
            { required: true, message: '身份证号', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          culture: [
            { required: true, message: '文化程度', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          attr: [
            { required: true, message: '人员属性', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          telephone: [
            { required: true, message: '电话号码', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          farmid: [
            { required: true, message: '农合证号', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
          work: [
            { required: true, message: '工作单位', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
          ],
        }
      }
    },
    created() {
      this.$nextTick(() => {
        this.crud.toQuery()
        this.getSorts()
        this.getNations()
        this.getPositions()
        this.crud.msg.add = '新增成功'
      })
    },
    mounted: function() {
      const that = this
      window.onresize = function temp() {
        that.height = document.documentElement.clientHeight - 180 + 'px;'
      }
    },
    methods: {
      [CRUD.HOOK.afterAddError](crud) {
        this.afterErrorMethod(crud)
      },
      [CRUD.HOOK.afterEditError](crud) {
        this.afterErrorMethod(crud)
      },
      afterErrorMethod(crud) {
      },
      deleteTag(value) {
      },
      // 新增与编辑前做的操作
      [CRUD.HOOK.afterToCU](crud, form) {
        form.enabled = form.enabled.toString()
      },
      // 打开编辑弹窗前做的操作
      [CRUD.HOOK.beforeToEdit](crud, form) {
      },
      // 提交前做的操作
      [CRUD.HOOK.afterValidateCU](crud) {
      },
      // 改变状态
      changeEnabled(data, val) {
        this.$confirm('此操作将 ' + data.group + ', 是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          crudHome.edit(data).then(res => {
            this.crud.notify('成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
          }).catch(() => {
            data.enabled = !data.enabled
          })
        }).catch(() => {
          data.enabled = !data.enabled
        })
      },
      checkboxT(row, rowIndex) {
        return row.id !== this.rowIndex
      },
      formatSex(row, column) {
        return row.sex === 1 ? '男' : '女'
      },
      formatHeath(row, column) {
        return row.heath === 0 ? '良好' : row.heath === 1 ? '健康' : '正常'
      },
      formatIsfarm(row, column) {
        return row.isfarm === 0 ? '否' : '是'
      },
      formatWedding(row, column) {
        return row.wedding === 0 ? '未婚' : '已婚'
      },
      formatIscountry(row, column) {
        return row.iscountry === 0 ? '否' : '是'
      },
      getNations() {
        getNations().then(res => {
          this.nations = res
        })
      },
      getPositions() {
        getPositions().then(res => {
          this.positions = res
        })
      },
      getSorts() {
        getSorts().then(res => {
          this.sorts = res
        })
      },
      // 上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      //日期格式化
      dateFormat:function(row,column){
        var date = row[column.property];
        if(date === undefined){return ''};
        return moment(date).format("YYYY-MM-DD")
      }
    },
  }
</script>

<style>
  *{
    margin:0;
    padding:0;
  }
  ul,ol{
    list-style:none;
  }
  body{
    font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  }
  .hidden{
    display:none;
  }
  .new-btn-login-sp{
    padding: 1px;
    display: inline-block;
    width: 75%;
  }
  .new-btn-login {
    background-color: #02aaf1;
    color: #FFFFFF;
    font-weight: bold;
    border: none;
    width: 100%;
    height: 30px;
    border-radius: 5px;
    font-size: 16px;
  }
  #main{
    width:100%;
    margin:0 auto;
    font-size:14px;
  }
  .red-star{
    color:#f00;
    width:10px;
    display:inline-block;
  }
  .null-star{
    color:#fff;
  }
  .content{
    margin-top:5px;
  }
  .content dt{
    width:100px;
    display:inline-block;
    float: left;
    margin-left: 20px;
    color: #666;
    font-size: 13px;
    margin-top: 8px;
  }
  .content dd{
    margin-left:120px;
    margin-bottom:5px;
  }
  .content dd input {
    width: 85%;
    height: 28px;
    border: 0;
    -webkit-border-radius: 0;
    -webkit-appearance: none;
  }
  #foot{
    margin-top:10px;
    position: absolute;
    bottom: 15px;
    width: 100%;
  }
  .foot-ul{
    width: 100%;
  }
  .foot-ul li {
    width: 100%;
    text-align:center;
    color: #666;
  }
  .note-help {
    color: #999999;
    font-size: 12px;
    line-height: 130%;
    margin-top: 5px;
    width: 100%;
    display: block;
  }
  .btn-dd{
    margin: 20px;
    text-align: center;
  }
  .foot-ul{
    width: 100%;
  }
  .one_line{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #eeeeee;
    width: 100%;
    margin-left: 20px;
  }
  .am-header {
    display: -webkit-box;
    display: -ms-flexbox;
    width: 100%;
    position: relative;
    padding: 7px 0;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    background: #1D222D;
    height: 50px;
    text-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    box-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    box-align: center;
  }
  .am-header h1 {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    box-flex: 1;
    line-height: 18px;
    text-align: center;
    font-size: 18px;
    font-weight: 300;
    color: #fff;
  }
</style>

